$primary: #eb7290;
$success: #5dbe8a;
$warning: #fbc82f;
$error: #de1c31;
$alert: #813c85;
$themes: (
  dayLight: (
    normalBackground: #fff,
    normalText: #000,
    normalTextShadow: 0 0 1px #000,
    opacityBackground: rgba(255, 255, 255, 0.7),
    normalBoxShadow: 0 0 48px rgba(0, 0, 0, 0.15),
    longBoxShadow: 0 22px 48px rgba(0, 0, 0, 0.15),
    lightPrimaryBackground: scale-color($primary, $lightness: 70%),
    lightSuccessBackground: scale-color($success, $lightness: 70%),
    lightWarningBackground: scale-color($warning, $lightness: 70%),
    lightErrorBackground: scale-color($error, $lightness: 70%),
    lightAlertBackground: scale-color($alert, $lightness: 70%)
  ),
  nightEye: (
    normalBackground: #000,
    normalText: #fff,
    normalTextShadow: 0 0 2px #fff,
    opacityBackground: rgba(0, 0, 0, 0.8),
    normalBoxShadow: 0 0 48px rgba(255, 255, 255, 0.15),
    longBoxShadow: 0 22px 48px rgba(255, 255, 255, 0.2),
    lightPrimaryBackground: scale-color($primary, $lightness: -70%),
    lightSuccessBackground: scale-color($success, $lightness: -70%),
    lightWarningBackground: scale-color($warning, $lightness: -70%),
    lightErrorBackground: scale-color($error, $lightness: -70%),
    lightAlertBackground: scale-color($alert, $lightness: -70%)
  )
);
//遍历主题map
@mixin themeCount {
  @each $themeName, $themeMap in $themes {
    //!global 把局部变量强升为全局变量
    $themeMap: $themeMap !global;
    //判断html的data-theme的属性值  #{}是sass的插值表达式
    //& sass嵌套里的父容器标识   @content是混合器插槽，像vue的slot
    [data-theme='#{$themeName}'] & {
      @content;
    }
  }
}
//声明一个根据Key获取颜色的function
@function themed($key) {
  @return map-get($themeMap, $key);
}
//背景颜色
@mixin background($color) {
  @include themeCount {
    background: themed($color);
  }
}
//字体颜色
@mixin normalText($color) {
  @include themeCount {
    color: themed($color);
  }
}
//文本阴影颜色
@mixin normalTextShadow($color) {
  @include themeCount {
    text-shadow: themed($color);
  }
}
//常规阴影颜色
@mixin normalBoxShadow($color) {
  @include themeCount {
    box-shadow: themed($color);
  }
}
